<template>
  <div>
    <!-- <el-row class="table-grid-content">
      <el-form :inline="true" class="demo-form-inline" :span="10">
        <el-form-item label="" style="">
          <el-input v-model="search" size="medium" placeholder="商品名称" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="searchDom()"
            >搜索</el-button
          >
          <el-button size="small" @click="resetDom('tableData')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-row> -->
    <!-- 添加 -->
    <el-row class="addBox">
      <el-button type="success" size="medium" @click="goodsAdd"
        ><i class="el-icon-plus" style="padding-right: 6px"></i>添加</el-button
      >
    </el-row>
    <!-- 商品列表 -->
    <el-table
      border
      :data="goodList.filter(data => !search || data.good_name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      @selection-change="selectChangeDom"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column
        fixed
        prop="good_name"
        label="名称"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="图片" :resizable="true" width="200">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img"
            fit="cover"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="200"></el-table-column>
      <el-table-column label="是否上架" width="200" :resizable="true">
          <template slot-scope="scope">
              <span>
                  {{statusMap[scope.row.status]?statusMap[scope.row.status]:""}}
              </span>
          </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot="header">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="Detail(scope.row)" type="text" slot="reference">
            详情
          </el-button>
          <el-button type="text" style="color:#E6A23C" @click="banGood(scope.row)">禁用</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.row)"
            type="text"
            style="color: red"
            slot="reference"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="pageSizseArr"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataLength"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { goodList, deleteGood, banGood } from "@/utils/productList.js";
export default {
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      goodListLoading: false, //加载商品列表
      goodList: [], //商品列表
      delVisible: false,
      search: "",
      selectTrue: [],
      statusMap: { //商品状态
          "1": "上架",
          "3": "禁用"
      },

      pageSizseArr: [5, 10, 20, 50, 100], 
      dataLength: 0, 
      params: {
        page: 1, //当前页
        size: 5, 
        good_type: "",
        search: "", 
        is_new: "",
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      //多选
      this.multipleSelection = val.map((e) => e.id);
    },
    handleSizeChange(val) {
      //分页尺寸改变
      this.params.size = parseInt(val);
    },
    handleCurrentChange(val) {
      //跳转到页
      this.params.page = parseInt(val);
    },
    getGoodsList() {
      //获取商品列表
      this.goodListLoading = true;
      goodList(this.params) //传参数请求数据
        .then((res) => {
          this.goodListLoading = false;
          if (res.code !== 2000) {
            this.$message.error("加载商品列表出错！" + res.msg);
            return;
          }
          this.goodList = res.data.data;
          this.dataLength = res.data.count;
        })
        .catch((err) => {
          this.$message.error(err);
          this.goodListLoading = false;
        });
    },
    deleteRow(row) { //删除
      deleteGood({
        good_id: row.good_id,
      }) //传参数请求数据
        .then((res) => {
          if (res.code !== 2000) {
            this.$message.error("删除失败！", res.msg);
            return;
          }
          this.getGoodsList();
          this.$notify({
            message: "删除成功",
            type: "success",
          });
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    banGood(row) { //禁用
        banGood({
                good_id: row.good_id
            }) //传参数请求数据
            .then((res) => {
                if (res.code !== 2000) {
                    this.$message.error('操作失败！', res.msg);
                    return;
                }
                this.getGoodsList();
                this.$notify({
                    message: '操作成功',
                    type: 'success'
                });
            }).catch((err) => {
                this.$message.error(err);
            });
    },
    goodsAdd() {
      //添加
      // this.$router.push("/addGoods");
      this.$router.push({
          path: "/addGoods"// 0是添加
      })
    },
    Detail(row) { //详情
        this.$router.push({
            path: "/addGoods/" + row.good_id
        })
    },
    selectChangeDom(val) {
      this.selectTrue = val.map((e) => e.id);
    },
    // searchDom() {
    //   this.tableData = this.getGoodsList;
    //   this.tableData = this.tableData.filter((item) => {
    //     if (item.good_name.includes(this.search)) {
    //       return item;
    //     }
    //   });
    //   this.pagecount = Math.ceil(this.tableData.length / this.pagesize);
    // },
    // resetDom(tableData) {
    //   this.tableData = this.getGoodsList;
    //   this.search = "";
    //   this.pagecount = Math.ceil(this.tableData.length / this.pagesize);
    // },
  },
  mounted() {
    this.getGoodsList(); //获取商品列表
  },
  watch: {
    "params.page": {
      handler() {
        this.getGoodsList();
      },
      deep: true,
    },
    "params.size": {
      handler() {
        this.getGoodsList();
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.table-grid-content {
  border-radius: 4px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
  padding: 10px;
}
.table-grid-content .demo-form-inline {
  display: flex;
  justify-content: left;
}
.addBox .el-button {
  display: flex;
  margin: 10px;
  justify-content: left;
}
</style>